<template>
  <div class="container-body article-container" :style="{width: proxy.globalInfo.bodyWidth + 'px'}" >

    <div class="sub-board" v-if="pBoardId">
      <span :class="['board-item', boardId == 0 ? 'active' : '']">
        <router-link :to="`/forum/${pBoardId}`">全部</router-link>
      </span>
      <span v-for="item in subBoardList" :key="item.boardId" :class="['board-item', item.boardId == boardId ? 'active' : '']">
        <router-link :to="`/forum/${item.pBoardId}/${item.boardId}`">{{ item.boardName }}</router-link>
      </span>
    </div>

    <div class="article-panel">
      <div class="top-tab">
        <div :class="['tab', orderType == 0 ? 'active' : '']" @click="changeOrderType(0)">热榜</div>
        <el-divider direction="vertical" />
        <div :class="['tab', orderType == 1 ? 'active' : '']" @click="changeOrderType(1)">发布时间</div>
        <el-divider direction="vertical" />
        <div :class="['tab', orderType == 2 ? 'active' : '']" @click="changeOrderType(2)">最新</div>
      </div>
      <div class="article-list">
        <PageList NoDataMsg="暂无文章" :loading="loading" :dataSource="articleListInfo" @pageNoChange="loadArticle">
          <template #default="{ data }">
            <ArticleListItem :data="data" />
          </template>
        </PageList>
      </div>
    </div>
  </div>
</template>

<script setup>
import { loadArticleList } from '@/utils/Api';
import ArticleListItem from './ArticleListItem.vue';
import PageList from '@/components/PageList.vue';
import { ref, reactive, getCurrentInstance, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore();
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const api = {
  loadArticle: "/forum/loadArticle",
}


//文章列表
const orderType = ref(0);
const loading = ref(false);
const articleListInfo = ref({});
//一级板块
const pBoardId = ref(0);
//二级板块
const boardId = ref(0);

const changeOrderType = (type) => {
  orderType.value = type;
  loadArticle();
}
const loadArticle = async () => {
  loading.value = true;
  let params = {
    pageNo: articleListInfo.value.pageNo,
    pBoardId: pBoardId.value,
    boardId: boardId.value,
    orderType: orderType.value,
  }
  // let result = await proxy.Request({
  //   url: api.loadArticle,
  //   params: params,
  //   showLoading: false
  // })
  let result = await loadArticleList(params);
  loading.value = false;
  if (!result) {
    return;
  }
  articleListInfo.value = result.data;
}
// loadArticle();
//二级板块
const subBoardList = ref([]);
const setSubBoardList = () => {
  subBoardList.value = store.getters.getSubBoardList(pBoardId.value)
}


//监听路由变化
watch(() => route.params, (newVal, oldVal) => {

  pBoardId.value = newVal.pBoardId;
  boardId.value = newVal.boardId || 0;
  loadArticle();
  setSubBoardList()
  //设置当前板块id
  store.commit('setCurrentPBoardId', newVal.pBoardId)
  store.commit('setCurrentBoardId', newVal.boardId)

}, { immediate: true, deep: true }
)

//监听boardList的变化
watch(() => store.state.boardList, (newVal, oldVal) => {
  setSubBoardList()
}, { immediate: true, deep: true })

</script>

<style lang="scss">
.article-container {

  .sub-board {
    padding-bottom: 10px;

    .board-item {
      background: #fff;
      border-radius: 15px;
      padding: 5px;
      margin-right: 10px;
      color: #7c7c7c;
      cursor: pointer;
      font-size: 12px;

      a {
        color: #7c7c7c;
        text-decoration: none;
      }

    }

    .active {
      background: var(--link);

      a {
        color: #fff;
      }
    }
  }

  .article-panel {
    background: #fff;

    .top-tab {
      display: flex;
      align-items: center;
      padding: 10px;
      font-size: 14px;
      // border: 1px solid #dedede;
      box-shadow: 1px 1px 5px #dedede;

      .tab {
        cursor: pointer;
      }

      .active {
        color: var(--link);
      }
    }
  }
}
</style>